<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${ctx}">
<title>流程图</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link type="text/css" media="screen" charset="utf-8" rel="stylesheet" href="${ctx}/commons/css/common.css" />
<script type="text/javascript" src="${ctx}plugins/jquery/jquery-1.7.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		//设置节点详情的位置
		$("#ul").css("margin-left",(document.body.scrollWidth-432)/2);
	});
	function displayInfo(count){
		var node = $("#node_"+count).children();
		$("#nodeIndex").html(node[0].innerHTML);
		$("#userName").html(node[1].innerHTML);
		$("#refNodes").html(node[2].innerHTML);
		$("#memo").html(node[3].innerHTML);
		$("#ul").css("display", "block");
	}
	function seout(){
		$("#ul").css("display", "none");
	}
</script>
<style type="text/css">
	.start{ background:url(${ctx}img/start.png) no-repeat; width:42px; height:80px; display:block; float:left;}
	.node{ background:url(${ctx}img/node.png) no-repeat; width:97px; height:80px; display:block; float:left;}
	.node p{ margin: 7px 9px; color: white; line-height: 20px; font-weight: bold;}
	.to_as{ background:url(${ctx}img/to.png) no-repeat; width:42px; height:80px; display:block; float:left;}
	.end{ background:url(${ctx}img/end.png) no-repeat; width:43px; height:80px; display:block; float:left;}
	.ul li{float:left;}
	.lic{ background:url(${ctx}img/prop.png) no-repeat; width:88px; height:88px;margin-left: 20px;}
	.lic p{ margin-top: 8px;}
	hr{margin-top: 1px;margin-bottom:1px; border-top:1px solid #000;height:0; line-height:0; width:69px; overflow:hidden;}
</style>
</head>
<body>
	<div align="center" style="position: absolute; z-index: 9999;"><br><br>
		<ul id="ul" class="ul" style="display: none;">
			<li class="lic"><p>节点序号</p><hr><span id="nodeIndex"></span></li>
			<li class="lic"><p>节点操作人</p><hr><span id="userName"></span></li>
			<li class="lic"><p>参考节点</p><hr><span id="refNodes"></span></li>
			<li class="lic"><p>节点描述</p><hr><span id="memo"></span></li>
		</ul>
	</div>
	<h3 class="fn-mt7">流程信息</h3>
	<c:if test="${resultMsg != null}">
		<div class="tip-div">
			<div <c:choose><c:when test="${success}">class="tip-success"</c:when><c:otherwise>class="tip-warn"</c:otherwise></c:choose>><div class="tip-content">${resultMsg }</div></div>
		</div>
	</c:if>
	<div class="tb-table">
		<c:if test="${flowModel != null }">
			<table>
				<tr>
					<th width="15%">所属分类：</th>
					<td width="20%"><c:out value="${flowModel.typeName }"></c:out></td>
					<th width="15%">流程名称：</th>
					<td width="20%"><c:out value="${flowModel.flowName }"></c:out></td>
					<th width="10%">状态：</th>
					<td width="15%">
						<c:if test="${48 eq flowModel.status }">未使用</c:if>
						<c:if test="${49 eq flowModel.status }">使用中</c:if>
						<c:if test="${50 eq flowModel.status }">已保留</c:if>
					</td>
				</tr>
				<tr>
					<th>流程描述：</th>
					<td colspan="5"><c:out value="${flowModel.memo }"></c:out></td>
				</tr>
			</table>
		</c:if>
	</div>
	<h3 class="fn-mt7">流程图</h3><br>
	<div align="center" style="background-color: white;">
		<ul style="background-color: white;">
			<li class="start"></li>
			<c:if test="${flowModel.nodeList != null }">
				<c:forEach var="node" items="${flowModel.nodeList }">
					<li class="to_as"></li>
					<li class="node" onmouseover="displayInfo('${node.nodeIndex}')" onmouseout="seout()"><p>${node.nodeName}</p><hr/><p>${node.nodeIndex}</p></li>
					<div id="node_${node.nodeIndex }" style="display: none;">
						<span>${node.nodeIndex}</span>
						<span>
							<c:choose>
								<c:when test="${!empty node.userName}">
									<c:if test="${!empty userMap}">${userMap[node.userName]}</c:if>
								</c:when>
								<c:otherwise>
									<c:if test="${!empty deptMap}">${deptMap[node.deptNo]}</c:if>
									<c:if test="${!empty node.deptNo && !empty node.postNo}"> <font color="brown">并且是</font> </c:if>
									<c:if test="${!empty postMap}">${postMap[node.postNo]}</c:if>
								</c:otherwise>
							</c:choose>
						</span>
						<span>${node.refNodes}</span>
						<span>${node.memo}</span>
					</div>
				</c:forEach>
			</c:if>
			<li class="to_as"></li>
			<li class="end"></li>
		</ul>
	</div>
</body>
</html>